import { FC,useEffect, useState,useReducer } from 'react';
import { useNavigate } from 'react-router';

const Index: FC<any> = (props:any): JSX.Element => {

    const [count,setCount]= useState(0);

    const [list,disPatch]= useReducer((state:any,action:any)=>{


        let newState=JSON.parse(JSON.stringify(state));

        if(action.type=="ADD"){

            newState.push(action.val);

        }
        if(action.type=="DELETE"){


            newState.splice(action.val,1);
             
        }


        console.log(newState);
        
        console.log(action);
        

       return newState

    },["a","b","c"]);

    const add=()=>{

        disPatch({type:"ADD",val:"d"})
         
    }
    const del=(index:number)=>{

        disPatch({type:"DELETE",val:index})
    }


    useEffect(()=>{
    },[])

    return (
      <div>useReducer

        <div>

            <ul>
                {
                    list.map((item:string,index:number)=>(
                        <li key={item}>
                            {item}

                            <button onClick={()=>del(index)}>删除</button>
                            
                        </li>
                        )
                    )
                }
              
            </ul>
        </div>

        <button onClick={add}>添加</button>

      {/* <div>
      {count}
      </div> */}
      </div>
    )
}
export default Index;